<template>
  <div ref="withdrawal" class="withdrawal" />
</template>

<script>
import * as echarts from 'echarts/core'
import {
  BarChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
)
export default {
  name: 'Withdrawal',
  mounted() {
    var myChart = echarts.init(this.$refs.withdrawal)
    myChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      color: ['#2fc25b', '#facc14'],
      legend: {
        data: ['用户提现', '店铺提现']
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        }
      ],
      series: [
        {
          name: '用户提现',
          type: 'bar',
          barWidth: 10,
          data: [53, 29, 48, 41, 50, 41, 29],
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        },
        {
          name: '店铺提现',
          type: 'bar',
          barWidth: 10,
          data: [31, 18, 45, 29, 31, 29, 17],
          markPoint: {
            data: [
              { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183 },
              { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ]
          }
        }
      ]

    })
  }
}
</script>

<style lang="scss" scoped>
.withdrawal {
  height: 100%;
  width: 100%;
}
</style>
